<template>
  <div class="wrapper"
       ref="wrapper">
    <div class="bscroll-container">
      <!-- 内容列表 -->
      <slot></slot>
      <!-- 底部提示信息 -->
      <div class="bottom-tip">
        <span class="loading-hook">{{pullupMsg}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  props: {
    'data': {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      pullupMsg: '加载更多',
      loading: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        // 初始化better-scroll
        probeType: 1, // 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true // 是否派发click事件
      })
      // 滑动结束松开事件
      this.scroll.on('touchEnd', pos => {
        if (pos.y < this.scroll.maxScrollY - 30 && !this.loading) {
          // 下拉加载
          this.pullupMsg = '加载中...'
          this.loading = true
          this.$emit('loadMore', () => {
            this.loading = false
            this.pullupMsg = '加载更多'
            setTimeout(() => {
              this.scroll.refresh()
            })
          })
        }
      })
    })
  }
}
</script>
<style lang="stylus" scoped>
.wrapper
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  .bottom-tip
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #777;
    background: #f2f2f2;
</style>
